<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
<link href="css/forword.css" type="text/css" rel="stylesheet">
<style type="text/css">
.code{
	background-image:url(111.jpg);
	font-family:Arial,宋体;
	font-style:italic;
	color:green;
	border:0;
	padding:1px 3px;
	letter-spacing:3px;
	font-weight:bolder;
}
.unchanged {border:0;}
</style>

<script type="text/javascript">
var xhr;
function checkName(obj){
	  
	   if(window.ActiveXObject){
		   //当IE为5以下
		   xhr = new ActiveXObject("Microsoft.XMLHTTP");
		  // alert("Microsoft.XMLHTTP类型");
	   }else if(window.XMLHttpRequest){
		   xhr = new XMLHttpRequest();
		   //alert("XMLHttpRequest类型");
		}else{
			//alert("浏览器不支持ajax技术!")
			return;
		}
	   //3.访问服务器端
	     xhr.onreadystatechange = callback;
		//3.2打开要访问的服务器资源
		//xhr.open("get","checkProdName.action?prodname=" + obj.value);
		//用post方法打开服务器端
		xhr.open("post","checkUserName.action");
		//3.3发送对服务器的访问请求
		xhr.setRequestHeader("If-Modified-Since","0");  //设置修改属性，消除IE缓存干扰
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		
		xhr.send("name=" + obj.value);
	   
}
function callback(){
	  // alert("回调函数");
	  //5.根据服务器返回结果处理客户端
	  //如果服务器端执行完毕
	  if(xhr.readyState == 4){
		  //如果结果wei执行成功
		  if(xhr.status == 200){
			  var ret = xhr.responseText;
			  if(ret.indexOf("yes") != -1){
				  var divObj = document.getElementById("chkUserName");
				  divObj.innerHTML="该用户名已经存在，不能再次注册";
			  }else{
				  var divObj = document.getElementById("chkUserName");
				  divObj.innerHTML="";
			  }
		  }else if(xhr.status == 404){
			  alert(404);
		  }
	  }
}
function checkSubmint(){
	  var divObj = document.getElementById("chkUserName");
	  var inputCode = document.getElementById("input1").value.toUpperCase();
	  if(divObj.innerHTML){
		  return false;
	  }else if(inputCode.length <=0){
		 alert("请输入验证码！");  
		return false;
	  }else if(inputCode != code){
		 alert("验证码输入错误！");  
		createCode();  
		return false;
	  }else{
		  return true;
	  }
}
 function checkPassword(){
	var password1 = document.getElementById("password1").value;
	var password2 = document.getElementById("password2").value;

	 
	if(password1 != password2){
		var divObj = document.getElementById("chkUserPassword");
		  divObj.innerHTML="两次密码不一致，请从新输入";
	}else{
		  var divObj = document.getElementById("chkUserPassword");
		  divObj.innerHTML="";
	  }
}

 //验证码实现
 
 var code ; 
//在全局 定义验证码
function createCode()
{
	 code = new Array();
	 var codeLength = 4;
	 //验证码的长度
	 var checkCode = document.getElementById("checkCode");
	 checkCode.value = "";
	 var selectChar = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');
	 for(var i=0;i<codeLength;i++) 
	 {   
	 var charIndex = Math.floor(Math.random()*32); 
	 code +=selectChar[charIndex];}
	 if(code.length != codeLength){   
	 createCode();
	 }
	 checkCode.value = code;
 }

 
</script>

</head>
<body onLoad="createCode();">
<!-- 头部包含文件 -->
 <%@include file="../commonq/myhead.jsp" %> 
 <table class="main">
	<tr>
		<td style="width:180px;vertical-align:top;">
			<%-- <%@include file="../commonq/menu.jsp" %> --%>	
		</td>
		<td style="vertical-align:top;padding:20px;">
		<div style="padding-left:30%;padding-top:50px;">
			<div style="text-align:left;height:30px;"><h3>新用户注册：</h3></div>
			 <s:form action="addUser.action" method="post" enctype="multipart/form-data" onsubmit="return checkSubmint();">
				<s:textfield label="用户名" required="true" requiredposition="left" name="user.name" key="name" onblur="checkName(this)" />
				<s:label id="chkUserName" cssStyle="color:red;"></s:label>
				<s:password label="用户密码" required="true" requiredposition="left" name="user.password" id="password1"/>
				<s:password label="再次输入密码" required="true" requiredposition="left" id="password2" onblur="checkPassword()"/>
				<s:label id="chkUserPassword" cssStyle="color:red;"></s:label>
				<tr>
				  <td>请输入验证码：</td>
				  <td><input type="text" id="input1"></td>
				  <td><input type="button" id="checkCode" class="code" style="width:60px" onClick="createCode()" /></td>
				  <td><a href="#" onClick="createCode()">看不清楚</a></td>
				</tr>
				<!-- 验证码 -->
				<s:submit value="注册"/>
				<s:reset value="重置"/>
			</s:form>	
			</div>
		</td>
	</tr>
</table> 
 
<%@include file="../commonq/tail.jsp" %>
</body>
</html>